<template>
  <div class="life-style-item">
    <i class="icon" :style="{backgroundImage:`url('${icon}')`}"></i>
    <span class="title">{{title}}</span>
    <span class="text">{{text}}</span>
  </div>
</template>

<script>
export default {
  name: 'life-style-item',
  props: ['icon', 'title', 'text']
}
</script>

<style lang="stylus">
$size = 3em;

.life-style-item {
  position: relative;
  margin: 1em 0;
  padding-left: $size + 1em;

  .icon {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    content: '';
    width: $size;
    height: $size;
    background: center / cover no-repeat;
    transform: translateY(-50%);
  }

  .title, .text {
    display: block;
  }

  .title {
    margin-bottom: 0.5em;
    color: $font-gray;
  }
}
</style>
